var puzzle = {
    XYCheckList: {
        '1': [0, 0],
        '2': [191, 0],
        '3': [383, 0],
        '4': [0, 132],
        '5': [134, 132],
        '6': [383, 190],
        '7': [0, 324],
        '8': [134, 382],
        '9': [383, 382],
    },
    isOverLap: false,
    source: {},
    init: function () {
        puzzle.fastClick();
        puzzle.getPicsList();
        puzzle.setSmallSize()
        puzzle.bindEvent()
    },
    fastClick: function () {
        "addEventListener" in document && document.addEventListener("DOMContentLoaded", function () {
            FastClick.attach(document.body)
        }, !1)
    },
    getRandomSort: function () {
        var sort = [];

        function getRandomNum() {
            var num = Math.ceil(9 * Math.random());
            -1 == sort.indexOf(num) ?
                (sort.push(num), sort.length < 9 && getRandomNum()) :
                getRandomNum()
        }
        return getRandomNum(), sort;
    },
    getPicsList: function () {
        var list = '', sort = this.getRandomSort();
        for (var i = 0; i < sort.length; i++) {
            list += `<div class="item c${sort[i]}"><img src="./img/${sort[i]}.png" alt=""></div>`
        }
        $('.picsList').html(list);
    },
    setPos: function (ele, x, y) {
        $(ele).css({
            position: !x && !y ? 'static' : 'absolute',
            left: x,
            top: y,
        })
    },
    setSmallSize: function () {
        $('.picsList .item').each(function (i, v) {
            $(this).find('img').width($(this).width())
        })
    },
    // 相交判断 以中心点为准
    checkOverlap: function (ele1, ele2) {
        var ele1LeftCenter = ele1.offset().left + ele1.outerWidth() / 2,
            ele1TopCenter = ele1.offset().top + ele1.outerHeight() / 2;

        var ele2LeftEdge = ele2.offset().left,
            ele2TopEdge = ele2.offset().top,
            ele2RightEdge = ele2.offset().left + ele2.outerWidth(),
            ele2BottomEdge = ele2.offset().top + ele2.outerHeight();


        return ele1LeftCenter > ele2LeftEdge && ele1LeftCenter < ele2RightEdge && ele1TopCenter > ele2TopEdge && ele1TopCenter < ele2BottomEdge;
    },
    bindEvent: function () {
        $(".picsList .item img").on("touchstart", function (e) {
            e.preventDefault()
            e.stopPropagation()

            puzzle.isMove = false;

            var touch = e.originalEvent.targetTouches[0],
                x = touch.clientX,
                y = touch.clientY;


            puzzle.source = {
                ele: $(this).clone(),
                startOffset: { // 初始偏移量 鼠标点击的是碎片的哪个位置
                    x: x - $(this).offset().left,
                    y: y - $(this).offset().top
                }
            }

        })

        $(".picsList .item img").on("touchmove", function (e) {
            e.preventDefault();
            e.stopPropagation();
            puzzle.isMove = true;

            // 获取鼠标偏移量设置碎片的位置
            var touch = e.originalEvent.targetTouches[0],
                x = touch.clientX - $('#box').offset().left - puzzle.source.startOffset.x + $('.scrollBox').scrollLeft(),
                y = touch.clientY - $('#box').offset().top - puzzle.source.startOffset.y + $('.scrollBox').scrollTop();

            puzzle.setPos(this, x, y);

            // 判断是否相交
            var index = $(this).parent().attr("class").replace("item c", "");
            index && (puzzle.checkOverlap($(this), $("#box .item" + index)) ? puzzle.isOverLap = !0 : puzzle.isOverLap = !1);
        })

        $(".picsList .item img").on("touchend", function (e) {
            e.preventDefault();
            e.stopPropagation();
            var $this = $(this);

            var touch = e.originalEvent.changedTouches[0],
                x = touch.clientX,
                y = touch.clientY;


            if (puzzle.isOverLap && puzzle.isMove) {
                $('#mask').show();
                $this.unbind("touchend touchmove touchstart");

                var index = $this.parent().attr("class").replace("item c", "");

                TweenLite.to(this, .5, {
                    left: puzzle.XYCheckList[index][0]+ $('.scrollBox').scrollLeft(),
                    top: puzzle.XYCheckList[index][1] + $('.scrollBox').scrollTop(),
                    width: $(this).width('auto'),
                    ease: Power1.easeIn,
                    onComplete: function () {
                        $this.remove();

                        $("#box").append(puzzle.source.ele.css({
                            width: 'auto',
                            position: 'absolute',
                            left: puzzle.XYCheckList[index][0],
                            top: puzzle.XYCheckList[index][1],
                        }))

                        setTimeout(function () {
                            $("#mask").hide();
                        }, 50)
                        $(".bg .tip").fadeOut()
                    }
                })

            } else {
                puzzle.setPos(this);
            }
        })
    }
}
puzzle.init()
